<!DOCTYPE HTML>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
	<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
	<title>统战成员学习平台</title>
	<link rel="stylesheet" type="text/css" href="../../css/base.css" />
	<link rel="stylesheet" type="text/css" href="../../css/style.css" />
	<link rel="stylesheet" type="text/css" href="../../css/idangerous.swiper.css">
</head>

<body>

	<div id='app' v-show="true" class="app news" style="display:none">
		<div class="news-slide">
			<div class="device">
				<div class="swiper-container">
					<div class="swiper-wrapper">
						<div v-for="appNewsBanner of appNewsBanners" :key="appNewsBanner" class="swiper-slide" @click="openBannerDetail(appNewsBanner.configValue,appNewsBanner.configValue2)">
							<div class="titleImg" :style="'background:url(\''+ imageBasePath + appNewsBanner.configValue3 +'\') no-repeat center center;background-size:cover;'"></div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="app-content" @touchstart="conTouchstart()">
			<!-- <ul class="list list-kc"> -->
			<transition-group name="list" tag="ul" class="list list-kc">
				<li v-for="item of items" @click="openNewsDetail(item.newsId)" :key="item" :class="{'no_img': !item.titleImg}">
					<div class="dl">
						<div class="news-img" :style="'background:url(\'' + item.titleImg +'\') no-repeat center center;background-size:cover;'"></div>
					</div>
					<div class="dr">
						<div class="l1">
							<span class="l1-title">
									  {{item.title}}
									</span>
						</div>
						<div class="l2">
							<span class="l2-title">
									 {{item.summary}}
								  </span>
						</div>
					</div>
				</li>
				<div v-if="isLastPage" @click="toTop()" class="no_more" key="no_more">没有更多了，点击回到顶部</div>
				<!-- </ul> -->
			</transition-group>
			<transition name="fade">
				<spinner v-if="loading"></spinner>
			</transition>
		</div>
	</div>

</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/idangerous.swiper.min.js"></script>
<script type="text/javascript" src="../../script/layer_mobile/layer.js"></script>
<script type="text/javascript">
	var swiper;
	var vm = new Vue({
		el: '#app',
		data: {
			newsgenreid: 0,
			items: [],
			appNewsBanners: [],
			loading: false,
			isLastPage: false,
			pageNum: 1,
			pageSize: 10,
			imagePath: imageBasePath,
			pageIndex: 0,
			swippering:false
		},
		mounted: function() {
			var $this = this;

			apiready = function() {
				$this.newsgenreid = api.pageParam.newsGenreId;
				$this.pageIndex = api.pageParam.pageIndex;
				$this.appNewsBanners = JSON.parse(api.pageParam.appNewsBanners);

				$this.getList();

				onScrollToBottom(function () {
					if ($this.isLastPage) return;
					$this.getList()
				});

					api.setRefreshHeaderInfo({
						bgColor: '#f5f5f9',
						textColor: '#aaa',
						textDown: '下拉刷新...',
						textUp: '松开刷新...'
					}, function(ret, err) {
						$this.pageNum = 1;
						$this.isLastPage = false;
						$this.getList(true)
					});
				$this.init()
				//解决轮播图滑动bug
				api.addEventListener({
					name: 'swipeleft'
				}, function(ret, err) {
					api.setFrameAttr({
						name: api.frameName,
						bounces: false
					});
					// alert('向左轻扫');
					if(!$this.swippering){
						api.setFrameGroupIndex({
							name: 'newsGroup',
							index: $this.pageIndex + 1,
							scroll: true
						});
					}

				});
				api.addEventListener({
					name: 'swiperight'
				}, function(ret, err) {
					api.setFrameAttr({
						name: api.frameName,
						bounces: false
					});
					// alert('向右轻扫');
					if ($this.pageIndex > 0 && !$this.swippering) {
						api.setFrameGroupIndex({
							name: 'newsGroup',
							index: $this.pageIndex - 1,
							scroll: true
						});
					}
				});
			}


		},
		methods: {
			init: function () {
				var $this = this;

				$this.$nextTick(function () {
					swiper = new Swiper('.swiper-container', {
						touchRatio: 1,
						preventLinksPropagation: false,
						centeredSlides: true,
						slidesPerView: 1.4,
						watchActiveIndex: true,
						touchMoveStopPropagation: true, //true时阻止touchmove冒泡事件。
						preventClicksPropagation: true,
						onTouchStart: function (swiper, event) {
							api.setFrameAttr({
								name: api.frameName,
								bounces: false
							});
							$this.swippering = true;
						},
						onTouchEnd: function (swiper) {
							api.setFrameAttr({
								name: api.frameName,
								bounces: true
							});
						},
						onSlideChangeEnd: function (swiper) {
							$this.swippering = false;
						}
					})
				})
			},
			getList: function(refresh) {
				var $this = this;
				if ($this.loading) return;
				$this.loading = true;
				post('/client/news/newsList', {
					'newsGenreId': $this.newsgenreid,
					'pageNum': $this.pageNum,
					'pageSize': $this.pageSize
				}, function(ret) {
					if (refresh) {
						api.refreshHeaderLoadDone();
						$this.items = []
					}
					$this.loading = false;
					if (ret.code === '200') {
						ret.data.list.forEach(function(item) {
							item.titleImg = item.titleImg ? imageBasePath + item.titleImg : '../../image/news_default.jpg';
							$this.items.push(item)
						});
						$this.pageNum++;
						if (ret.data.isLastPage) {
							$this.isLastPage = true;
							return;
						}
					} else if (ret.code === '206') {
						$this.isLastPage = true;
					}
				});
			},
			openNewsDetail: function(newsId) {
				api.openWin({
					name: 'newsDetail_win',
					url: 'newsDetail_win.html',
					pageParam: {
						newsId: newsId
					},
					bounces: false,
					delay: api.systemType == 'ios' ? 0 : 300,
					hScrollBarEnabled: false,
					vScrollBarEnabled: false
				})
			},
			openBannerDetail: function(linkUrl, linkName) {
				api.openWin({
					name: 'newsBannerDetail_win',
					url: 'newsBannerDetail_win.html',
					pageParam: {
						linkName: linkName,
						linkUrl: linkUrl
					},
					bounces: false,
					delay: api.systemType == 'ios' ? 0 : 300,
					hScrollBarEnabled: false,
					vScrollBarEnabled: false
				})
			},
			toTop: function() {
				api.pageUp({
					'top': true
				}, function() {})
			},
			conTouchstart:function(){
				var $this = this;
				$this.swippering = false;
			}
		}
	});
</script>

</html>
